<template>
  <section class="outer">
    <div class="pack">
      <div class="synopsis-top">
        <h3 class="synopsis-h3">简介</h3>
      </div>
      <div class="synopsis-text">
        <!--用v-show 来实现 显示和隐藏-->
        <div class="when-fold" v-show="appear" @click="fold()">
          <p>
            【籍籍无名小编剧VS天才游戏开发者】
            这是一对难兄难妹讹上具有暴富潜质帅酷毙男主的故事
            吴虑未曾想到，从来资质平平，运气更不算好的自己，会被游戏行业的明日之星看中，而原因竟是……
            北京五环开外，一个废弃的车库，一群年少无为即将跨入中年的青年们……
            他们迷信在车库容易创业成功的传说——【许多著名公司，创始之初都是诞生于车库，如：…
          </p>
        </div>
        <!--控制显示和隐藏-->
        <div class="when-expand" v-show="arise" @click="expand()">
          <p>
            【籍籍无名小编剧VS天才游戏开发者】
            这是一对难兄难妹讹上具有暴富潜质帅酷毙男主的故事
            吴虑未曾想到，从来资质平平，运气更不算好的自己，会被游戏行业的明日之星看中，而原因竟是……
            北京五环开外，一个废弃的车库，一群年少无为即将跨入中年的青年们……
            他们迷信在车库容易创业成功的传说——【许多著名公司，创始之初都是诞生于车库，如：谷歌、苹果、亚马逊、惠普、YouTube等】
            他们笃定——【现实已经破碎，而我们需要创造游戏来修复它。】
            而无意闯入此地的废柴少女，也有着自己的梦想——她想要拥有自己署名的编剧作品，还有……成为这里的‘车库夫人’！
          </p>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      appear: true, //默认显示
      arise: false,
    };
  },

  methods: {
    fold() {
      this.appear = false;
      this.arise = true;
    },
    expand() {
      this.appear = true;
      this.arise = false;
    },
  },
};
</script>
<style lang="scss">
.outer {
  width: 1200px;
  margin: 0 auto;
  .pack {
    width: 810px;
    margin: 0 auto;
    .synopsis-top {
      width: 100%;
      height: 33px;
      box-sizing: border-box;
      padding: 10px 13px;
      background-color: #eff2f3;
      .synopsis-h3 {
        font-size: 13px;
        color: #333;
      }
    }
  }
}
// <!-- 书的简介 -->
.outer {
  .up-summary {
    width: 592px;
    height: 100px;
    margin: 0 auto;

    .highlight {
      margin-top: 27px;
      margin-bottom: 30px;
      font-size: 13px;
      color: #333;
      text-align: center;
    }
  }
}

// 简介
.outer {
  //简介文字部分
  .synopsis-text {
    padding: 20px 13px 10px;
    .when-fold {
      font-size: 13px;
      color: #333;
      cursor: pointer;
    }
    .when-expand {
      font-size: 13px;
      color: #333;
      cursor: pointer;
    }
  }
}
</style>